<template>
    <div>
        <h1>堆叠柱状图</h1>
        <tab-switching :account="2" :data="menuItems" />
        <div class="stack-bar-charts" :style="{ height: height, width: width }"></div>
    </div>
</template>
<script>
import TabSwitching from '@/components/TabSwitching/TabSwitching.vue';
import menuItems from './ments';
import * as echarts from 'echarts';

export default {
    name: 'StackedBarChart',
    components: { TabSwitching },
    data() {
        return {
            menuItems: menuItems,
            height: '400px',
            width: '600px'
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const chart = echarts.init(document.querySelector('.stack-bar-charts'));
            const option = {
                // title: {
                //     text: '单位（件）',
                //     position: 'left',
                //     textStyle: {
                //         color: '#ffffff', // 这里设置标题颜色为红色
                //         fontSize: 12
                //     }
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '单位（件）',
                    nameGap: 25, //设置name的高度
                    position: 'left',
                    nameTextStyle: {
                        color: '#ffffff' // 设置y轴名称颜色为红色
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff'
                        }
                    }
                },
                series: [
                    {
                        yAxisIndex: 0,
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        stack: 'stack',
                        ////柱子左面设置立体正方
                        barWidth: 9,
                        itemStyle: {
                            normal: {
                                // //柱子左面重要的是color配置：线性渐变， 从上往下
                                color: {
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(52,151,186, .8)'
                                        },
                                        {
                                            offset: 0.8,
                                            color: 'rgba(60,124,183, 1)'
                                        }
                                    ]
                                }
                            }
                        }
                    },

                    {
                        yAxisIndex: 0,
                        tooltip: {
                            show: true,
                            padding: 100,
                            position: [-10, '50%'],
                            borderWidth: 100
                        },
                        type: 'bar',
                        barWidth: 13,
                        barCategoryGap: '60%',
                        itemStyle: {
                            //柱子右面
                            normal: {
                                // 重要的是color配置：线性渐变， 从上往下
                                color: {
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#46d7f9'
                                        },
                                        {
                                            offset: 1,
                                            color: ' #4cb5fb'
                                            // color: "rgba(77,175,251,0.57)",
                                        }
                                    ]
                                },
                                borderWidth: 0.3,
                                borderColor: 'rgba(76,182,251, 0.5)'
                            }
                        },
                        data: [120, 200, 150, 80, 70, 110, 130],
                        // 间隔为0
                        barGap: 0,
                        z: 5
                    },
                    {
                        yAxisIndex: 0,
                        z: 10,
                        // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
                        type: 'pictorialBar', // 自定义图形
                        symbolPosition: 'end', // 图形边缘与柱子边缘对齐
                        data: [120, 200, 150, 80, 70, 110, 130],
                        symbol: 'diamond', // 图形形状
                        symbolOffset: [-0.5, -12.5], // 图形边缘与柱子边缘对齐
                        symbolRotate: 90, // 图形旋转
                        symbolSize: [8.5, 23.6], // 图形大小
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                color: 'rgba(69,216,249, 1)'
                            }
                        },
                        tooltip: {
                            show: false
                        }
                    }
                ]
            };

            chart.setOption(option);
        }
    }
};
</script>

<style scoped></style>
